<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1.插值与指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 
        Vue的世界中有两种模板语法：
            第一种：插值语法（简单），用于在标签体中插入指定内容 —— 操作标签体
            第二种：指令语法（复杂），用于：操作标签属性、操作标签体、绑定事件...........
     -->
    <!-- 准备好一个容器-->
    <div id="demo">
      <!-- 插值语法 -->
      <h1>欢迎来到{{school}}学习</h1>
      <hr>
      <!-- 指令语法 -->
      <a v-bind:href="url">点我去{{school}}学习1</a>
      <a v-bind:href="url.toUpperCase()">点我去{{school}}学习2</a>
      <a href="url.toUpperCase()">点我去{{school}}学习3</a>
      <a v-bind:href="1+1">点我去{{school}}学习4</a>
      <a href="1+1">点我去{{school}}学习5</a>
      <a v-bind:href="url+1">点我去{{school}}学习6</a>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          school:'尚硅谷',
          url:'http://www.atguigu.com'
        }
      })
    </script>
  </body>
</html>